<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-03-11 16:28:15
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-13 09:40:19
 * @FilePath: /hr_new_vue3/src/components/DynamicFormsNew/RenderingForm/FormItem/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 动态表单渲染组件 -->
<template>
  <!-- 子集信息 -->
  <div v-if="!componentType" class="vecational-work">
    <div class="noType">{{ name }}</div>
  </div>
  <!-- 控件信息 -->
  <a-form-item
    v-else
    :label="labelName"
    field="oneValue"
    show-colon
    :disabled="props.disabled"
    :rules="[
      {
        required: props.required == 1 ? true : false,
        validator
      }
    ]"
  >
    <FormDesignRender
      :review="props.review"
      v-model:data="modelData"
      v-model:values="modelData[ctlValue]"
    />
  </a-form-item>
</template>
<script setup lang="ts">
import FormDesignRender from './FormDesignRender.vue';
import useControlFormStore from '@/store/controlForm';
import { useVModel } from '@vueuse/core';
const props = withDefaults(
  //参数说明
  defineProps<{
    props: { [propName: string]: any } | string;
    name: string;
    required: boolean | number;
    disabled?: boolean | number;
    values: (string | number | string[] | number[])[];
    selectOptions?: any[];
    validateRules?: any;
    cnName?: string;
    childrenCtl?: any[];
    data?: any;
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
    isSub?: boolean;
    review?: boolean;
  }>(),
  {
    isSub: false,
    review: false,
    disabled: false
  }
);
const emits = defineEmits(['update:values', 'update:props', 'update:data']);
const getProps = useVModel(props, 'props', emits);
const modelData = useVModel(props, 'data', emits);
const controlFormStore = useControlFormStore();
const ctlValue = controlFormStore.fieldNames.valueName;
const componentType = computed(() => {
  if (!props?.data) return '错误';
  return props.data[controlFormStore.fieldNames.componentType];
});
const labelName = computed(() => {
  if (!props?.data) return '错误';
  return props.data[controlFormStore.fieldNames.labelName];
});

//字段动态校验
const validator = (value: any, callback: any) => {
  const { values, required, regex } = props;

  if (componentType.value === 'TEXT') {
    //单行输入框
    const { validate } = getProps.value;
    if (required === 1 && !values) return callback('请输入' + labelName.value);
    if (!validate) return callback();

    if (regex) {
      const roleItem = regex[validate];
      const checkVal = roleItem.role.test(values);
      if (!checkVal) {
        return callback(new Error('请输入正确的' + roleItem.name));
      }
    }
  } else if (componentType.value === 'TEXT_AREA') {
    //多行输入框
    if (required === 1 && !values) return callback('请输入' + labelName.value);
  } else if (componentType.value === 'SELECT') {
    //选择框
    if (required === 1 && !values) return callback('请选择' + labelName.value);
  } else {
    if (required === 1 && !values) return callback('请输入' + labelName.value);
  }
  callback();
};
</script>
<style lang="less" scoped></style>
